<template>
	<view class="content">
		<uv-navbar bg-color="rgba(0,0,0,0)">
			<template v-slot:left>
				<view class="uv-nav-slot-left" @click="goBack">
					<uv-icon name="arrow-left" size="20" color="#ffffff"></uv-icon>
				</view>
			</template>
			<template v-slot:center>
				<view class="uv-nav-slot-title">
					<text class="nav-title-text" :style="navTitleStyle">{{shopData.shop_name.short_name}}</text>
				</view>
			</template>
		</uv-navbar>

		<view class="top-img-box" v-if="shopData.banner">
			<image :src="$thumbImg(shopData.banner,'750x500')" mode="aspectFit"
				@click="previewImage_1([shopData.banner])"></image>
		</view>
		<view class="top-common-banner" v-else>
			<view class="common-banner-name">
				<text>{{shopData.shop_name.short_name}}</text>
			</view>
			<view class="common-banner-address">
				<text>{{shopData.address.address_number}}</text>
			</view>

		</view>
		<view class="shop-content-box" id="my-component">
			<view class="name-box">
				<view class="full-name-box">
					<text>{{shopData.shop_name.full_name}}</text>
				</view>
				<view class="">
					<view class="custom-logo-box" v-if="!shopData.logo_src||shopData.logo_src==''">
						<text class="logo-box-name">{{shortNameText}}</text>
					</view>
					<view class="shop-logo-box" v-else>
						<image :src="shopData.logo_src" mode="aspectFit"></image>
					</view>

				</view>

			</view>
			<view class="icon-content-box">
				<wjf-iconfont code="e614" color="deepskyblue" size="15"></wjf-iconfont>
				<text class="title-text">商铺位置</text>
				<text class="content-text">{{shopData.address.address_number}}</text>
			</view>
			<view class="icon-content-box">
				<wjf-iconfont code="e63e" color="deepskyblue" size="15"></wjf-iconfont>
				<text class="title-text">商铺简介</text>
				<text class="content-text">{{shopData.shop_desc}}</text>
			</view>
			<view class="icon-content-box">
				<wjf-iconfont code="e70a" color="deepskyblue" size="15"></wjf-iconfont>
				<view class="phone-box">
					<view class="phone" v-if="shopData.phone.contact">
						<text class="title">销售电话</text>
						<text class="phone-text">{{shopData.phone.contact}}</text>
					</view>
					<view class="phone" v-if="shopData.phone.business">
						<text class="title">商务合作</text>
						<text class="phone-text">{{shopData.phone.business}}</text>
					</view>
				</view>
			</view>
			<view class="icon-content-box" v-if="shopData.location" @click="navigationToShop">
				<wjf-iconfont code="e7b3" color="deepskyblue" size="15"></wjf-iconfont>
				<!-- <text class="title-text">导航到商铺</text> -->
				<text class="nav-text">导航到商铺</text>
			</view>
		</view>
		<uv-list>
			<template v-for="(item,index) in productData" :key="item._id">
				<uv-list-item>
					<view class="list-item-box">
						<view class="item-in-box">
							<view class="image-box">
								<image :src="$thumbImg(item.goods_thumb,'200x200')" class="item-image" mode="aspectFit"
									@click="previewImage(index)"></image>
							</view>

							<view class="right-box" @click="toDetail(item)">
								<view class="name-box">
									<text>{{item.name.length>28 ? item.name.slice(0,28)+'...':item.name}}</text>
								</view>
								<view class="desc-box">
									<text>{{item.goods_summary}}</text>
								</view>
							</view>

						</view>
					</view>
				</uv-list-item>
			</template>
		</uv-list>

	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				statusBarHeight: 0,
				toTop: 0, //指定组件到屏幕顶部距离
				shop_id: '',
				shopID: '',
				shopData: {
					banner: '',
					logo_src: '',
					shop_name: {
						full_name: '',
						short_name: ''
					},
					address: {
						address_number: ''
					},
					phone: {
						contact: '',
						business: ''
					},
					location: null
				},
				productData: [],
				productImgArr: []
			}
		},
		computed: {
			transparent() {
				if (this.toTop > (110 + this.statusBarHeight)) {
					return 0
				} else if (this.toTop < (1 + this.statusBarHeight)) {
					return 1
				} else {
					return (110 + this.statusBarHeight - this.toTop) / 110
				}
			},
			navTitleStyle() {
				// 110-1
				return {
					color: `rgb(255,255,255,${this.transparent})`,
					"text-shadow": `-1px -1px 0 rgb(244,0,0,${this.transparent}), 1px -1px 0 rgb(244,0,0,${this.transparent}), -1px 1px 0 rgb(244,0,0,${this.transparent}),1px 1px 0 rgb(244,0,0,${this.transparent})`
				}
			},
			shortNameText() {
				return this.shopData.shop_name.short_name.length > 8 ? this.shopData.shop_name.short_name.slice(0, 7) :
					this.shopData.shop_name.short_name
			}
		},
		onLoad(e) {
			if (e.id) {
				this.shop_id = e.id
			}
			if (e.shopID) {
				this.shopID = e.shopID
			}
			this.getShopData(e.id)
			this.getProductData(e.shopID)
			// #ifndef H5
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight
			// #endif
			// #ifdef MP-WEIXIN
			wx.onShareAppMessage(() => {
				return {
					title: '恒汇导视',
					imageUrl: '' // 图片 URL
				}
			})
			// #endif
		},
		onPageScroll: function(e) {
			// console.log(e);
			this.getLocation()
		},
		mounted() {
			this.getLocation()
		},
		methods: {
			navigationToShop() {
				// #ifdef MP-WEIXIN
				wx.openLocation({
					latitude: this.shopData.location.latitude, // 纬度
					longitude: this.shopData.location.longitude, // 经度
					scale: 13, // 缩放比例
					name: this.shopData.location.name ? this.shopData.location.name : this.shopData.shop_name
						.full_name, // 位置名称
					address: `乌鲁木齐市头屯河区头屯河公路2201号 新疆恒汇机电城 ${this.shopData.address.address_number} 号` // 地址信息
				})
				// #endif
			},
			toDetail(item) {
				uni.navigateTo({
					url: '../product/detail?id=' + item._id + "&tt=0",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async getParam() {
				await this.asGetLocation().then(res => {
					console.log(res);
				})
			},
			asGetLocation() {
				return new Promise((resovle, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#my-component').boundingClientRect(data => {
						if (data) {
							// data中包含位置信息，如data.top, data.left等
							// console.log('组件的top：', data.top);
							resovle(data.top)
						}
					}).exec();
				})

			},
			getLocation() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#my-component').boundingClientRect(data => {
					if (data) {
						// data中包含位置信息，如data.top, data.left等
						this.toTop = data.top
						// console.log('组件的top：', data.top);
					}
				}).exec();

			},
			async getShopData() {
				await db.collection('tian-mall-shops').doc(this.shop_id).field(
						'ID,shop_name,address,banner,shop_desc,phone,logo_src,location')
					.get().then(({
						result
					}) => {
						this.shopData = Object.assign({}, this.shopData, result.data[0])
						// this.getProductData(this.shopData.ID)
						// console.log(this.shopData);
					})
			},
			async getProductData(ID) {
				await db.collection('tian-mall-products').where({
					shop_ID: ID
				}).field('name,goods_summary,goods_thumb').get().then(({
					result
				}) => {
					this.productData = result.data
					this.productImgArr = result.data.map(item => item.goods_thumb)
					// console.log(result.data);
				})
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.productImgArr,
					current: index
				})
			},
			previewImage_1(src) {
				uni.previewImage({
					urls: src,
				})
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #eeeeee;
	}

	.top-common-banner {
		width: 100%;
		height: 500rpx;
		background-image: url('https://wjf-5866.oss-cn-hongkong.aliyuncs.com/henghui/static/shop-banner.png');
		background-size: cover;
		/* 背景图片覆盖整个元素 */
		background-position: center;
		/* 背景图片居中 */
		border-radius: 10rpx;

		// border-bottom-right-radius: 10rpx;
		.common-banner-name {
			position: absolute;
			left: 60rpx;
			top: 160rpx;

			text {
				color: #ff4400;
				font-size: 60rpx;
				font-weight: 550;
				letter-spacing: 2rpx;
				text-shadow:
					-1px -1px 0 #fff,
					1px -1px 0 #fff,
					-1px 1px 0 #fff,
					1px 1px 0 #fff;
			}
		}

		.common-banner-address {
			position: absolute;
			right: 30rpx;
			top: 400rpx;

			text {
				color: #fff;
				font-size: 40rpx;
			}
		}

	}

	.top-img-box {
		width: 100%;
		height: 500rpx;

		image {
			width: 100%;
			height: 100%;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}
	}

	.shop-content-box {
		width: 90%;
		margin: 20rpx auto;

		.name-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.full-name-box {
				width: 550rpx;

				text {
					font-weight: 600;
					font-size: 30rpx;
					color: #ff4400;
				}
			}

			/* 自定义商铺LOGO */
			.custom-logo-box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: skyblue;
				background-image: url('/static/shop-logo-2.png');
				background-size: cover;
				/* 背景图片覆盖整个元素 */
				background-position: center;
				/* 背景图片居中 */

				.logo-box-name {
					font-size: 28rpx;
					font-weight: 550;
					color: #ff4400;
					line-height: 1.15;
					letter-spacing: 2rpx;
					text-shadow:
						-1px -1px 0 #fff,
						1px -1px 0 #fff,
						-1px 1px 0 #fff,
						1px 1px 0 #fff;
				}
			}

			.shop-logo-box {
				width: 150rpx;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

		}

		.icon-content-box {
			margin: 30rpx 0;
			display: flex;
			align-items: center;

			.title-text {
				font-size: 32rpx;
				margin: 0 10rpx;
				color: #333;
				width: 20vw;
			}

			.nav-text {
				margin-left: 30rpx;
				color: #333;
				font-size: 32rpx;
			}

			.content-text {
				flex: 1;
				color: #666;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}

			.phone-box {
				.phone {
					margin: 0 10rpx;

					.title {
						font-size: 32rpx;
						color: #333;
						width: 20vw;
						margin: 0 10rpx;
					}

					.phone-text {
						flex: 1;
						color: #666;
						font-size: 28rpx;
					}
				}


			}

		}
	}

	.list-item-box {
		// margin: 10rpx 0;
		width: 100vw;
		padding: 10rpx 0rpx;
		background-color: #eee;
		display: flex;
		align-items: center;

		.item-in-box {
			width: 96%;
			margin: 0 30rpx;
			padding: 0 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.image-box {
				width: 100rpx;
				height: 100rpx;

				.item-image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}


			.right-box {
				flex: 1;
				margin: 20rpx 0 20rpx 20rpx;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name-box {
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #555;
					}
				}

				.address-box {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #777;
					}
				}

				.desc-box {
					display: flex;
					align-items: center;

					text {
						// margin-left: 10rpx;
						font-size: 24rpx;
						color: #777;
						display: flexbox;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}

	.uv-nav-slot-left {
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uv-nav-slot-title {
		.nav-title-text {
			letter-spacing: 2px;
			font-size: 40rpx;
			font-weight: 600;
		}

	}
</style>